<template>
	<view class="pageAll">
		<view class="pageTop">
			<view class="page-top-view">
				<image :src="labelRouge"></image>
			</view>
			<!-- <view class="page-top-view">
				<text>{{slogen}}</text>
			</view> -->
			<view class="radioGroup page-top-view">
				<radio-group @change="chooseType">
					<label class="radio" v-for="(item, index) in userType" :key="item.value">
						<radio color="#ffc8c7" :value="item.value" :checked="item.value === current" />
						<view :class="{'checkedRadio':item.value === current}" class="radioView">
							<view v-if="item.value === current" class="InnerCircle"></view>
						</view>
						{{item.label}}
					</label>
				</radio-group>
			</view>
		</view>
		<view class="formView">
			<form>
				<view class="formViewInput">
					<input type="number" v-model="form.tel" placeholder="请输入手机号码" placeholder-style="color:#b57979" />
				</view>
				<view class="formViewInputVer">
					<input class="verificaInput" v-model="form.verCode" type="number" placeholder="请输入验证码" placeholder-style="color:#b57979" />
					<button @click="getVerificationCode" class="verifica">{{verBtnStr}}</button>
				</view>
				<view class="formViewInput">
					<input type="text" password v-model="form.password" placeholder="请输入登录密码" placeholder-style="color:#b57979" />
				</view>
				<view class="formViewInput">
					<input type="text" password v-model="form.rePassword" placeholder="请确认登录密码" placeholder-style="color:#b57979" />
				</view>
				<view class="agree">
					<label @click="chooseAgree">
						<view class="agreeLabel">
							<radio :value="true" v-model="agree" />
							<view :class="{'checkedRadio':agree}" class="radioView toRight">
								<view v-if="agree" class="InnerCircle"></view>
							</view>
							<text class="textLeft">点击注册即同意</text>
							<text class="textRight" @click.stop="showFile">《{{agreement}}》</text>
						</view>
					</label>
				</view>
				<view class="submitView">
					<button @click="submit" hover-class="subActive">
						注册
					</button>
				</view>
			</form>
		</view>
		<logo class="Bottomlogo"></logo>
	</view>
</template>

<script>
	import {
		HBValidate
	} from '../../../utils/tools.js'
	import logo from '../../../components/logo/bottomLogo.vue'
	let interval = null
	export default {
		data() {
			return {
				labelRouge: require('../../../static/index/labelRouge.png'), // 标语图片
				form: {
					tel: null,
					verCode: null,
					password: null,
					rePassword: null,
				}, // 表单
				// slogen: '标语的位置', // 标语
				userType: [{
						label: '个人用户',
						value: 1,
						type: 'user'
					},
					{
						label: '企业用户',
						value: 2,
						type: 'company'
					},
				], // 用户类别
				current: 1, // 当前选择的用户类别 1为个人，2为企业
				agree: true, // 协议
				agreement: '红标用户平台在线协议',
				verBtnStr: '获取验证码', // 获取验证码文字， 会动态的变
				countdown: 60, // 验证码倒计时
				isWorking: false, // 防止用户多次点击
				fileAgree: '',
			}
		},
		methods: {
			// 打开文件
			showFile() {
				uni.showLoading({
					title:'文件下载中',
					mask:true,
				})
				if(this.fileAgree) {
					this.downFile()
					.then(() => {
						uni.hideLoading()
					})
					.catch(() => {
						uni.hideLoading()
					})
				} else {
					this.getFile()
					.then(() => {
						this.downFile()
						.then(() => {
							uni.hideLoading()
						})
						.catch(() => {
							uni.hideLoading()
						})
					})
					.catch(() => {
						uni.hideLoading()
					})
				}
				
			},
			// 下载文件
			downFile() {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url: this.fileAgree,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									resolve()
								},
								fail(err) {
									reject()
								}
							});
						},
						fail() {
							reject()
						}
					});
				})
				
			},
			//  获取验证码
			getVerificationCode() {
				const validate = new HBValidate()
				if (validate.isPhone(this.form.tel)) {
					if (this.countdown === 60) {
						interval = setInterval(() => {
							this.countdown--
							this.verBtnStr = this.countdown + '后重新获取'
							if (this.countdown === 0) {
								this.countdown = 60;
								this.verBtnStr = '获取验证码'
								clearInterval(interval)
							}
						}, 1000)

						this.$api.code({
								mobile: this.form.tel,
								code_type: 'register', // 验证码类型(register:注册,update_password:更新密码)
							})
							.then(res => {
								if (res.status) {
									uni.showToast({
										title: '验证码已发送',
										icon: 'none',
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1500,
									})
								}
							})
					}
				} else {
					uni.showToast({
						title: '手机号码格式错误',
						duration: 2000,
						icon: 'none',
						mask: true
					});
				}
			},
			// 提交表单
			submit(evt) {
				const validate = new HBValidate()
				if (!validate.isPhone(this.form.tel)) {
					uni.showToast({
						title: '手机号码格式错误',
						duration: 2000,
						icon: 'none',
						mask: true
					})
				} else if (!validate.isDigits(this.form.verCode)) {
					uni.showToast({
						title: '验证码格式错误',
						duration: 2000,
						icon: 'none',
						mask: true
					})
				} else if (!validate.isPwd(this.form.password)) {
					uni.showToast({
						title: '登录密码必须为6-12之间的数字或英文字符',
						duration: 2000,
						icon: 'none',
						mask: true
					})
				} else if (!validate.isPwd(this.form.rePassword)) {
					uni.showToast({
						title: '确认密码必须为6-12之间的数字或英文字符',
						duration: 2000,
						icon: 'none',
						mask: true
					})
				} else if (!this.agree) {
					uni.showToast({
						title: '请勾选红标用户平台在线协议',
						duration: 2000,
						icon: 'none',
						mask: true
					})
				} else if (this.form.password !== this.form.rePassword) {
					uni.showToast({
						title: '两次密码不一致',
						duration: 2000,
						icon: 'none',
						mask: true
					})
				} else {
					// 防止用户多次点击
					if (this.isWorking) {
						return false
					} else {
						this.isWorking = true
					}
					let type = null
					// 确定用户的类型
					if (this.current === 1) {
						type = this.userType[0].type
					} else {
						type = this.userType[1].type
					}
					// 注册
					this.$api.supplierRegister({
							username: this.form.tel,
							password: this.form.password,
							password_verify: this.form.rePassword,
							code: this.form.verCode,
							type: type,
							openid: this.$store.getters.getOpenId
						})
						.then(res => {
							if (res.status) { // 注册成功
								this.$api.supplierLogin({ // 登录获取token
										username: this.form.tel,
										password: this.form.password,
									})
									.then(res => {
										if (res.status) {
											// 保存至缓存 联系电话
											uni.setStorage({
												key: 'userTel',
												data: this.form.tel,
												success: function() {}
											});
											// 保存至缓存 密码
											uni.setStorage({
												key: 'userPwd',
												data: this.form.password,
												success: function() {}
											});

											let tempType = ''
											if (res.data.type === 'user') {
												tempType = 1
											} else {
												tempType = 2
											}

											if (res.data.status === 'unreviewed') { // 用户状态 未审核
												if (res.data.type === 'user') {
													uni.navigateTo({
														url: '../ImprovePerInfo/ImprovePerInfo'
													})
												} else {
													uni.navigateTo({
														url: '../ImproveCorInfo/ImproveCorInfo'
													})
												}
											}
										} else if (res.data.status === 'checked') { // 已通过
											uni.switchTab({
												url: '../../index/index/index'
											})
										} else if (res.data.status === 'audit') { // 审核中
											uni.navigateTo({
												url: '../underReview/underReview'
											})
										} else if (res.data.status === 'pass') { // 审核已通过
											uni.navigateTo({
												url: '../alreadyPass/alreadyPass'
											})
										} else if (res.data.status === 'fail') { // 审核失败
											uni.navigateTo({
												url: '../noPass/noPass?userType=' + tempType
											})
										} else if (res.data.status === 'message_finish') { //已经填写好信息 没提交审核
											uni.navigateTo({
												url: '../cooperationSigning/cooperationSigning?userType=' + tempType
											})
										}
										this.$store.commit('setToken', res.token)
										this.$store.commit('setUserInfo', res.data)
										this.isWorking = false
									})
									.catch(err => {
										this.isWorking = false
									})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
								this.isWorking = false
							}

						})
				}
			},
			//  选择协议类别
			chooseType(evt) {
				for (let i = 0; i < this.userType.length; i++) {
					if (this.userType[i].value === parseInt(evt.target.value)) {
						this.current = this.userType[i].value;
						break;
					}
				}
			},
			// 勾选协议
			chooseAgree() {
				this.agree = !this.agree
			},
			getFile() {
				return new Promise((resolve, reject) => {
					this.$api.getUserAgreement({})
						.then(res => {
							if (res.status) {
								this.fileAgree = res.data.user_agreement
								resolve()
							} else {
								reject()
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
							}
								
						})
				})
				
			}
		},
		onLoad() {
			this.getFile()
		},
		components: {
			logo,
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 0 17upx 0 17upx;
		display: inline-block;
	}

	.pageTop {
		padding-top: 20upx;
		width: 100%;
		text-align: center;
		margin-bottom: 20upx;
	}

	.pageTop .page-top-view {
		margin-top: 30upx;
	}

	.pageTop image {
		width: 368upx;
		margin: 0 auto;
		height: 249.33upx;
	}

	.pageTop text {
		font-size: 54upx;
		color: #f72d09;
	}

	.pageTop .radioGroup {
		text-align: left;
		font-size: 32upx;
		padding-left: 20upx;
	}

	.pageTop .radioGroup radio {
		background-color: #ffc8c7;
		border: none;
		transform: scale(0.7);
		display: none;
	}

	.pageTop .radioGroup label {
		margin-right: 46.66upx;
		line-height: 20upx;
		color: #636363
	}

	.radioView {
		content: "";
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		background-color: #FFC8C7;
		display: inline-block;
		margin-bottom: -4upx;
		margin-right: 30upx;
		position: relative;
	}

	.checkedRadio {
		background-color: #f7533e !important;
	}

	.InnerCircle {
		background-color: #f7533e !important;
		border: 4upx solid #FFF7F5;
		width: 16upx !important;
		height: 16upx !important;
		position: absolute;
		margin: auto;
		top: 0upx;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
		border-radius: 50%;
	}

	.formView {
		margin-top: 13.33upx;
	}

	.formViewInput {
		width: 100%;
		margin-bottom: 13.33upx;
	}

	.formViewInput input {
		border-radius: 8upx;
		background-color: #FFF;
		box-shadow: 0 0 10upx rgba(57, 11, 11, 0.15);
		height: 100upx;
		color: #b57979;
		font-size: 32upx;
		padding: 0 20upx;
	}

	.formViewInputVer {
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: 13.33upx;
	}

	.verificaInput {
		background-color: #FFF;
		box-shadow: 0 0 10upx rgba(57, 11, 11, 0.15);
		height: 100upx;
		color: #b57979;
		font-size: 32upx;
		padding: 0 20upx;
		width: 478upx !important;
		border-top-left-radius: 8upx;
		border-bottom-left-radius: 8upx;
	}

	.formViewInputVer .verifica {
		border-radius: 0;
		width: 220upx;
		float: right;
		border-top-right-radius: 8upx !important;
		border-bottom-right-radius: 8upx !important;
		font-size: 32upx;
		background-color: #f7533e;
		padding: 0;
		height: 100upx;
		line-height: 100upx;
		color: #FFF;
	}

	.formViewInputVer .verifica:active {
		background-color: #FFC8C7;
	}

	.agree radio {
		display: none;
	}

	.agree {
		line-height: 20upx;
		font-size: 24upx;
		margin-bottom: 13.33upx;
	}

	.agreeLabel {
		display: flex;
	}

	.agree .textLeft {
		color: #966262;
		margin: auto 0;
	}

	.agree .textRight {
		color: #e64f2f;
		margin: auto 0;
	}

	.toRight {
		margin-left: 25upx;
		margin-right: 10upx !important;
	}

	.submitView {
		margin-top: 133.33upx;
	}

	.submitView button:after {
		border: none;
	}

	.submitView button {
		font-size: 36upx;
		background-color: #f7533e;
		color: #FFF;
		letter-spacing: 24upx;
		height: 100upx;
		line-height: 100upx;
		text-indent: 24upx;
		font-weight: 600;
	}

	.subActive {
		background-color: #FFC8C7 !important;
	}

	.Bottomlogo {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
